import React, { useEffect, useState } from 'react'
import AMapExample from '../AMapExample'
import { CloseOutline, MessageOutline, PhoneFill, LocationOutline, LocationFill, HandPayCircleOutline, LeftOutline } from 'antd-mobile-icons'
import { Rate, Mask, Button } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
export default function Driver() {
    let navigate = useNavigate()
    let obj = JSON.parse(localStorage.getItem('data')) || {
        "distance": 83663,
        "time": 3917,
        "speed": 33,
        "destinationName": "曲阳县",
        "originName": "河北科技学院",
        "capitals": {
            "citycode": "010",
            "adcode": "110000",
            "name": "孙师傅",
            "pai": "天C·88888",
            "tel": "1381111111",
            "img": "https://img0.baidu.com/it/u=2955332398,1712446780&fm=253&fmt=auto&app=120&f=JPEG",
            "brand": "丰田"
        }, "text": ""
    }
    let [text, setText] = useState('')
    let [num, setNum] = useState(sessionStorage.getItem('driverNum') || 0)
    let [flag, setFlag] = useState(false)
    let [visible, setVisible] = useState(false)
    useEffect(() => {
        if (num <= 0) {
            axios.post('/addserve', { serve: { ...obj, state: 1 , price: localStorage.getItem('price') || 0} }).then(res => {
                console.log(res);
            })
        }
        setText('司机即将到来...')
        let setI = setInterval(() => {
            setNum(num += 1)
            if (num >= 5) {
                setText('司机已到...')
            }
            if (num >= 10) {
                setFlag(true)
            }
            if (num >= 20) {
                setText('已经到达目的地...')
                setVisible(true)
                clearInterval(setI)
            }
        }, 2000)
        return () => {
            clearInterval(setI)
            sessionStorage.setItem('driverNum', num)
        }
    }, [])
    return (
        <div className='driver-all'>
            <LeftOutline className='driver-outline' onClick={() => {
                navigate(-1)
            }} />
            <AMapExample />
            <div>
                <div className='driver-list-text-title'>
                    <h1>{text}</h1>
                    {
                        flag ? <p>{((obj.distance) / 1000).toFixed(1)}公里</p> : <p>{(Math.random() * 10 + 5).toFixed(0)}分钟</p>
                    }

                </div>
                <div className='driver-list'>
                    <div>
                        <img src={obj.capitals.img} alt="" />
                    </div>
                    <div className='driver-list-text'>
                        <li>{obj.capitals.name}</li>
                        <li>{obj.capitals.brand}</li>
                    </div>
                    <div className='driver-list-text-num'>
                        <li>
                            <Rate allowHalf defaultValue={((Math.random() * 2) + 3).toFixed(1)} />
                        </li>
                        <li>{obj.capitals.pai}</li>
                    </div>
                </div>
                {
                    flag ? <div className='driver-list-text-driver'>
                        <div className='driver-list-text-start'>
                            <div>
                                <LocationOutline />
                            </div>
                            <div>
                                {obj.originName}
                            </div>
                            <div>0公里</div>
                        </div>
                        <div className='driver-list-text-end'>
                            <div><LocationFill /></div>
                            <div>
                                {obj.destinationName}
                            </div>
                            <div>
                                {((obj.distance) / 1000).toFixed(1)}公里
                            </div>
                        </div>
                    </div> : ''
                }
                <div className='driver-list-text-error'>
                    {
                        flag ? <div
                            onClick={() => {
                                setVisible(true)
                            }}
                        ><HandPayCircleOutline /></div> : <div onClick={()=>{navigate("/cancel")}}><CloseOutline /></div>
                    }
                    <div><MessageOutline /></div>
                    <div><PhoneFill /></div>
                </div>
            </div>
            <Mask
                visible={visible}
                onMaskClick={() => {
                    console.log('111');
                }}>
                <div className={'overlayContent-driver'}>
                    <div className='overlayContent-driver-img'>
                        <LocationFill />
                    </div>
                    <div className='overlayContent-driver-text'>
                        <h3>
                            您已到达你的目的地
                        </h3>
                    </div>
                    <div className='overlayContent-driver-btn'>
                        <Button
                            className='payment-btn'
                            block
                            type='primary' onClick={() => {
                                setVisible(false)
                                navigate('/pay')
                            }}
                        >支付订单</Button>
                        <Button
                            block
                            className='payment-btn-cancel'
                            type='primary' onClick={() => setVisible(false)}
                        >取消</Button>
                    </div>
                </div>
            </Mask>
        </div>
    )
}
